<!-- 设置页面 -->
<div class="settings-container">
    <div class="settings-header">
        <h2>平台设置</h2>
    </div>
    
    <div class="settings-tabs">
        <div class="settings-tab active" data-tab="basic">
            <i class="bi bi-gear"></i>
            <span>基础设置</span>
        </div>
        <div class="settings-tab" data-tab="models">
            <i class="bi bi-cpu"></i>
            <span>模型设置</span>
        </div>
    </div>
    
    <!-- 基础设置 -->
    <div class="settings-content" id="basic-settings">
        <div class="settings-section">
            <h3>默认模型配置</h3>
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                <strong>实时生效：</strong>修改默认模型设置后会立即生效，无需重启系统。新的对话将使用更新后的模型。
            </div>
            <div class="form-group">
                <label for="default-chat-model">默认对话模型</label>
                <select id="default-chat-model" class="form-control">
                    <option value="">请选择对话模型</option>
                </select>
            </div>
            <div class="form-group">
                <label for="default-embedding-model">默认嵌入模型</label>
                <select id="default-embedding-model" class="form-control">
                    <option value="">请选择嵌入模型</option>
                </select>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-primary" onclick="saveBasicSettings()">
                    <i class="bi bi-check"></i>
                    保存设置
                </button>
            </div>
        </div>
    </div>
    
    <!-- 模型设置 -->
    <div class="settings-content" id="model-settings" style="display: none;">
        <div class="settings-section">
            <div class="section-header">
                <h3>模型配置管理</h3>
                <button type="button" class="btn btn-primary" onclick="showAddModelModal()">
                    <i class="bi bi-plus"></i>
                    添加模型
                </button>
            </div>
            
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                <strong>实时生效：</strong>修改或删除模型配置后会立即生效。如果修改的是当前默认使用的模型，系统会自动重新加载该模型实例。
            </div>
            
            <!-- 模型过滤器 -->
            <div class="model-filters">
                <div class="filter-group">
                    <label for="category-filter">模型分类</label>
                    <select id="category-filter" class="form-control" onchange="filterModels()">
                        <option value="">全部分类</option>
                        <option value="openai">OpenAI</option>
                        <option value="ollama">Ollama</option>
                        <option value="deepseek">DeepSeek</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="type-filter">模型类型</label>
                    <select id="type-filter" class="form-control" onchange="filterModels()">
                        <option value="">全部类型</option>
                        <option value="chat">对话模型</option>
                        <option value="embedding">嵌入模型</option>
                    </select>
                </div>
            </div>
            
            <!-- 模型列表 -->
            <div class="model-list" id="model-list">
                <!-- 模型列表将通过JavaScript动态生成 -->
            </div>
            
            <!-- 分页 -->
            <div class="pagination-container" id="model-pagination">
                <!-- 分页将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑模型模态框 -->
<div class="modal fade" id="modelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelModalTitle">添加模型</h5>
                <button type="button" class="btn-close" onclick="hideModal('modelModal')">&times;</button>
            </div>
            <div class="modal-body">
                <form id="modelForm">
                    <input type="hidden" id="model-id">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model-alias">模型别名</label>
                                <input type="text" id="model-alias" class="form-control" required 
                                       placeholder="例如: GPT-4 专用版">
                                <small class="form-text">用于显示的友好名称</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model-category">模型分类</label>
                                <select id="model-category" class="form-control" required>
                                    <option value="">请选择分类</option>
                                    <option value="openai">OpenAI</option>
                                    <option value="ollama">Ollama</option>
                                    <option value="deepseek">DeepSeek</option>
                                </select>
                                <small class="form-text">模型提供商类型</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model-name">模型名称</label>
                                <input type="text" id="model-name" class="form-control" required 
                                       placeholder="例如: gpt-4-turbo">
                                <small class="form-text">API调用时使用的模型名称</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model-type">模型类型</label>
                                <select id="model-type" class="form-control" required>
                                    <option value="">请选择类型</option>
                                    <option value="chat">对话模型</option>
                                    <option value="embedding">嵌入模型</option>
                                </select>
                                <small class="form-text">模型的功能类型</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="model-base-path">模型基础路径</label>
                        <input type="text" id="model-base-path" class="form-control" required
                               placeholder="例如: https://api.openai.com/v1">
                        <small class="form-text">API接口的基础URL</small>
                    </div>
                    <div class="form-group">
                        <label for="model-api-key">API秘钥</label>
                        <input type="password" id="model-api-key" class="form-control" 
                               placeholder="输入API密钥">
                        <small class="form-text">访问模型服务的认证密钥（ollama类型可选）</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="model-sort-order">排序号</label>
                                <input type="number" id="model-sort-order" class="form-control" value="0" 
                                       placeholder="数字越小排序越靠前">
                                <small class="form-text">用于控制模型在列表中的显示顺序</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group checkbox-group">
                                <label class="form-label">启用</label>
                                <div class="toggle-switch">
                                    <input type="checkbox" id="model-enabled" class="toggle-input" checked>
                                    <label for="model-enabled" class="toggle-label">
                                        <span class="toggle-slider"></span>
                                    </label>
                                </div>
                                <small class="form-text">是否在系统中启用此模型</small>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideModal('modelModal')">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveModel()">保存</button>
            </div>
        </div>
    </div>
</div> 